<template>
	<view class="plan-week">
		<!-- 主容器，展示一周的计划 -->
		<swiper class="swiper" :duration="duration" :current-item-id="currentSwiper" @change="changeCurrent">
			<swiper-item @touchmove="preventTouchmove(e)" v-for="week in swiperWeeks" :key="week.weekKey"
				:item-id="week.weekKey.toString()">
				<!-- 循环展示每个星期的滑块项 -->
				<view class="week-card">
					<view class="week-day" :class="{ active: currentDay == item.all }" v-for="item in week.days"
						:key="item.week" @click="changeCurrentDay(item)">
						<!-- 循环展示每个星期的每一天 -->
						<text class="week">{{ item.week }}</text>
						<!-- 显示星期几 -->
						<text class="day">{{ item.day }}</text>
						<!-- 显示具体日期 -->
					</view>
				</view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import dayjs from 'dayjs';

	// 定义组件发出的事件
	const emits = defineEmits(['change']);

	const weeks = ['SUN', 'MON', 'TUE', 'WED', 'THU', 'FRI', 'SAT'];

	// 当前显示的周列表
	const weekList = ref([]);

	// 用于Swiper滑动的周列表
	const swiperWeeks = ref([]);

	// 当前Swiper的索引
	const currentSwiper = ref('0');

	// 当前日期
	const currentDay = ref(dayjs().format('YYYY-MM-DD'));

	// Swiper滑动过渡持续时间
	const duration = ref(500);

	/**
	 * 初始化周列表。
	 * 根据当前日期，初始化显示的三周（上周、本周、下周）的数据。
	 */
	const initWeeks = () => {
		const start = dayjs().startOf('week');
		console.log('---', start);
		const beforeWeek = getWeekDaysByStart(start.add(-1, 'week'));
		const nowWeek = getWeekDaysByStart(start);
		const afterWeek = getWeekDaysByStart(start.add(1, 'week'));
		weekList.value.push({
			weekKey: -1,
			days: beforeWeek,
		});
		weekList.value.push({
			weekKey: 0,
			days: nowWeek,
		});
		weekList.value.push({
			weekKey: 1,
			days: afterWeek,
		});
		swiperWeeks.value = weekList.value.slice(0);
	};

	/**
	 * 根据起始日期获取一周的天数列表。
	 * @param {dayjs} start 起始日期，为一周的开始。
	 * @returns {Array} 返回一个对象数组，每个对象包含星期、日期和完整日期。
	 */
	const getWeekDaysByStart = (start) => {
		const days = weeks.map((item, index) => {
			const day = dayjs(start).add(index, 'day');
			return {
				week: item,
				day: day.format('DD'),
				all: day.format('YYYY-MM-DD'),
			};
		});
		return days;
	};

	/**
	 * 阻止触摸移动事件的默认行为。
	 * 用于Swiper滑动时阻止页面滚动。
	 * @param {Event} e 事件对象。
	 */
	const preventTouchmove = (e) => {
		if (e && e.stopPropagation && typeof e.stopPropagation === 'function')
			e.stopPropagation();
	};

	/**
	 * 根据Swiper的滑动改变当前显示的周。
	 * @param {Object} detail 事件详情对象，包含当前项和当前项ID。
	 */
	const changeCurrent = ({
		detail
	}) => {
		console.log('detail', detail);
		const {
			current,
			currentItemId
		} = detail;
		console.log('current-->', current);
		if (current == 0) {
			duration.value = 0;

			let newWeeks = weekList.value.find((item) => item.weekKey == Number(currentItemId) - 1);

			if (!newWeeks) {
				const days = getWeekDaysByStart(
					dayjs()
					.add(Number(currentItemId) - 1, 'week')
					.startOf('week')
				);
				newWeeks = {
					weekKey: Number(currentItemId) - 1,
					days: days,
				};
				weekList.value.unshift(newWeeks);
			}
			swiperWeeks.value.unshift(newWeeks);
			swiperWeeks.value.splice(3);
		} else if (current == 2) {
			duration.value = 0;

			let newWeeks = weekList.value.find((item) => item.weekKey == Number(currentItemId) + 1);

			if (!newWeeks) {
				const days = getWeekDaysByStart(
					dayjs()
					.add(Number(currentItemId) + 1, 'week')
					.startOf('week')
				);
				newWeeks = {
					weekKey: Number(currentItemId) + 1,
					days: days,
				};
				weekList.value.push(newWeeks);
			}
			swiperWeeks.value.push(newWeeks);
			swiperWeeks.value.splice(0, 1);
		} else {
			duration.value = 500;
		}
		currentSwiper.value = currentItemId;
	};

	/**
	 * 改变当前日期。
	 * @param {Object} day 选择的日期对象，必须包含完整日期。
	 */
	const changeCurrentDay = (day) => {
		console.log(day);
		currentDay.value = day.all;
		emits('change', day.all); // 发出日期改变事件
	};

	initWeeks();
</script>

<style lang="scss" scoped>
	@import '../plan.scss';
</style>